<template>
  <div>
    <div class="tab_control_box" v-show="showPage == 0">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="数据统计" name="0">
          <DeviceDataStat v-if="activeName == 0" ref="DeviceDataStatRef" />
        </el-tab-pane>
        <el-tab-pane label="设备台账" name="1">
          <DeviceListData v-if="activeName == 1" ref="DeviceListDataRef" @modifDevice="addApproachInfo" @details="showDeviceDetails" />
        </el-tab-pane>
        <el-tab-pane label="设备检定" name="2">
          <DevicePoint v-if="activeName == 2" ref="DevicePointRef" @onDetails="showPointDetails" />
        </el-tab-pane>
        <el-tab-pane label="设备维修保养" name="3">
          <DeviceMaintain v-if="activeName == 3" ref="DeviceMaintainRef" @maintain="deviceMaintain" />
        </el-tab-pane>
        <el-tab-pane label="设备类型" name="4">
          <DeviceTypeModel v-if="activeName == 4" ref="DeviceTypeModelRef" />
        </el-tab-pane>
      </el-tabs>
      <div class="button_box">
        <el-row>
          <el-button type="text" icon="el-icon-refresh" plain @click="refreshListData">刷新</el-button>
          <el-button type="text" :icon="addIcon" plain v-show="activeName == 1" @click="addApproachInfo(null)">设备进场</el-button>
          <el-button type="text" :icon="addIcon" plain v-show="activeName == 2" @click="addDeviceInfo(activeName)">添加设备</el-button>
          <el-button type="text" :icon="addIcon" plain v-show="activeName == 3" @click="addDeviceInfo(activeName)">添加设备</el-button>
        </el-row>
      </div>
    </div>

    <AddDeviceInfoModel v-show="showPage == 1" ref="AddDeviceInfoRef" />
    <MatainDetail v-show="showPage == 2" ref="MatainDetailRef" />
    <AddDevicePointModel v-if="showPage == 3" ref="AddDevicePoinRef" />
    <MatainAddNew v-show="showPage == 4" ref="MatainAddRef" />
    <DeviceDetailsModel v-show="showPage == 5" ref="DeviceDetailsRef" />
    <PointDetailsModel v-show="showPage == 6" ref="PointDetailsRef" />
  </div>
</template>

<script>
import DeviceDataStat from "./device/DeviceDataStat";
import DeviceListData from "./device/DeviceListData";
import DeviceTypeModel from "./device/DeviceTypeModel";
import DevicePoint from "./device/DevicePoint";
import DeviceMaintain from "./device/DeviceMaintain";
import MatainDetail from "./device/MatainDetail";
import MatainAddNew from "./device/MatainAddNew";
import AddDeviceInfoModel from "../models/AddDeviceInfoModel";
import DeviceDetailsModel from "../models/DeviceDetailsModel";
import PointDetailsModel from "../models/PointDetailsModel";
import AddDevicePointModel from "../models/AddDevicePointModel";
import HttpInterface from "../../util/httpInterface";
import { mapActions } from "vuex";

export default {
  components: {
    DeviceDataStat, DeviceListData, AddDeviceInfoModel, DeviceDetailsModel,DeviceMaintain,
    DeviceTypeModel, DevicePoint, AddDevicePointModel,
    PointDetailsModel, MatainDetail, MatainAddNew
  },
  data() {
    return {
      activeName: '0',
      showPage: 0,
      addIcon: "el-icon-circle-plus-outline"
    };
  },

  created() {
    HttpInterface.getUserInfo(() => {
      this.getTendersInfo();
      this.refreshListData();
    });
  },

  methods: {
    ...mapActions(["getTendersInfo"]),

    handleClick() {
      this.refreshListData();
    },

    deviceMaintain(data) {
      this.showPage = 2;
      this.$nextTick(() => {
        this.$refs.MatainDetailRef.getMatainDetail(data);
      })
    },

    // 添加进场记录
    addApproachInfo (id) {
      this.showPage = 1;
      if (id == null) {
        this.$nextTick(() => {
          this.$refs.AddDeviceInfoRef.show();
        })
      } else {
        this.$nextTick(() => {
          this.$refs.AddDeviceInfoRef.show(id);
        })
      }
    },

    // 添加设备
    addDeviceInfo(type) {
      if (type == 2) {
        this.showPage = 3;
        this.$nextTick(() => {
          this.$refs.AddDevicePoinRef.queryListData();
        })
      } else if (type == 3) {
        this.showPage = 4;
        this.$refs.MatainAddRef.show();
      }
    },

    // 显示设备详情
    showDeviceDetails(id) {
      this.showPage = 5;
      this.$nextTick(() => {
        this.$refs.DeviceDetailsRef.getDeviceInfo(id);
      })
    },

    // 显示检定记录详情
    showPointDetails(data) {
      this.showPage = 6;
      this.$nextTick(() => {
        this.$refs.PointDetailsRef.getPointDetailsInfo(data);
      })
    },

    // 刷新数据
    refreshListData () {
      switch (Number(this.activeName)) {
        case 0:
          this.$nextTick(() => {
            this.$refs.DeviceDataStatRef.getDeviceChartData();
          })
          break;
        case 1:
          this.$nextTick(() => {
            this.$refs.DeviceListDataRef.queryListData();
          })
          break;
        case 2:
          this.$nextTick(() => {
            this.$refs.DevicePointRef.queryListData();
          })
          break;
        case 3:
          this.$nextTick(() => {
            this.$refs.DeviceMaintainRef.showMatainList();
          })
          break;
        case 4:
          this.$nextTick(() => {
            this.$refs.DeviceTypeModelRef.showDeviceList(this.$refs.DeviceTypeModelRef.$data.index);
          })
          break;
      }
    }
  }
};
</script>

<style  scoped lang="scss">

</style>
